<template>
  <div>
    <div class="aboutUs_die">
      <div>
        <p></p>
        <img src="http://www.zhaoshengku.net/wx-about%281%29.png" alt />
        <div>招生库平台是国内第一家招生工作者、教育机构和学生三方连接的创导者，通过为招生工作者提供一个属于自己的招生网站，打造属于自己的招生品牌，摆脱以往的发传单、送礼品的传统招生方式，利用互联网让自己的招生工作事半功倍，同时平台为教育机构提供了专业的营销平台和寻找专业的招生合作伙伴，让机构生源不再是自己头疼病，最后为每一位渴望知识、希望接受教育的学生提供满意的平台，让家长对孩子的教育放心。</div>
      </div>
      <div>
        <img src="http://www.zhaoshengku.net/wx-about%282%29.png" alt />
      </div>
      <div>
        <p>价值观</p>
        <div
          class="imageContainer"

        >
            <div class="item"  v-for="(item,index) in list" :key="index">
              <div :style="item.bg_src" :class="currentIndex==index?'div active':'div'" >
                  <p>
                      {{item.name_title}}
                  </p>
                  <p>
                     {{item.name_concat}}
                  </p>
              </div>
            </div>

        </div>
      </div>
      <div>
        <p>使命</p>
        <p>让招生工作者从事倍功半到事半功倍</p>
        <p>让教育机构都有专业招生合作伙伴</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: -1,
      list:[
        {
          name_title:"干净到透明",
          name_concat:"在公司内部， 我们希望对⼈和事做到坦诚和透明。让在鸢尾花⼯作的每⼀个⼈，可以互相信任，充分表达⾃⼰的意⻅和看法，并把精⼒全部投⼊到⼯作当中。同事之间不相互怀疑，⼼存隔阂。办公室政治是我们最不接受的。",
          bg_src:"background:url('http://www.zhaoshengku.net/wx-about%284%29.png');background-size: 100% 100%;background-position:  center center;"
        },
        {
          bg_src:"background:url('https://www.zhaoshengku.net/wx-about%286%29.png');background-size: 100% 100%;background-position:  center center;",
          name_title:"黑客与画家",
          name_concat:"我们是一个崇尚技术的团队，善于通过学习和工具解决问题。同时对美和品味有着坚持和追求。我们追求结果，但在同样结果的情况下，我们希望把任何事情做的优雅而有品味，在解决问题的同时，给用户和他人带来优雅的体验。"
        }
        // ,
        // {
        //   bg_src:"background:url('https://www.zhaoshengku.net/wx-jvxfor.png');background-size: 100% 100%;background-position:  center center;",
        //   name_title:"",
        //   name_concat:""
        // },
        //  autoplay
        //
        //   circular
        //   previous-margin="160rpx"
        //   next-margin="190rpx"
        //   @change="changeswipe" interval="3000"
          // duration="500"
      ]
    };
  },
  methods: {
    changeswipe(e){
         this.currentIndex=e.mp.detail.current;
    }
  },
  mounted() {
     // 设置头
    wx.setNavigationBarTitle({
      title: "关于我们"
    });
  },
  onShow(){
    // wx.request({
    //   url:"https://api.zhaoshengku.net/index/member/getcooperate",
    //   method:""
    // })
  },
  onPullDownRefresh(){
    wx.stopPullDownRefresh();
  }
};
</script>
<style scoped>
.aboutUs_die > div:nth-child(1) > p {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
}
.aboutUs_die > div:nth-child(1) > img {
  width: 100%;
  height: 400rpx;
}
.aboutUs_die > div:nth-child(1) > div {
  padding: 30rpx 35rpx;
  font-size: 13px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 23px;
  text-indent: 2em;
}
.aboutUs_die > div:nth-child(2) > img {
  width: 100%;
  height: 200rpx;
}
.div {
  margin: 0 auto;
  width: 332rpx;
  height: 420rpx;
  border-radius: 15rpx;
  background-size: 100% 100%;
  background-position:  center center;
  font-size:22rpx;
  color:#fff;
  padding: 0 35rpx;
  box-sizing: border-box;
  line-height: 38rpx;
}
.div > p:nth-child(1){
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.item {
  height: 800rpx;
  display: flex;
  align-items: center;
}
.imageContainer {
  margin: 0 30rpx;
  display: flex;
  align-items: center;
  height: 500rpx;
  background: #fff;
  justify-content: space-between;
  box-sizing: border-box;
}
.active {
  transform: scale(1.2);
  transition: all 0.2s;
}
.aboutUs_die > div:nth-child(3) > p {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: rgba(34, 34, 34, 1);
}
.aboutUs_die > div:nth-child(3) {
  padding: 50rpx 0;
}
.aboutUs_die > div:nth-child(4) {
  margin-top: 50rpx;
  width: 100%;
  height: 200rpx;
  background: url("http://www.zhaoshengku.net/wx-about%283%29.png") center
    center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding-top: 26rpx;
  box-sizing: border-box;
  margin-bottom: 100rpx;
}
.aboutUs_die > div:nth-child(4) > p:nth-child(1) {
  font-size: 17px;
  color: rgba(255, 255, 255, 1);
}
.aboutUs_die > div:nth-child(4) > p:nth-child(2),
.aboutUs_die > div:nth-child(4) > p:nth-child(3) {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 23px;
}
</style>
